
//  0: 游客 1：粉丝 2: 会员 4: 代理人 8: 合伙人 9: 班主任 10: 管理员

import React from 'react'
import {
    Button,
    message,
    Modal
} from 'antd'
import SearchBar from '../../components/SearchBar'
import Table from '../../components/Table'
import {
    FormModal
} from '../../components/ModalForm'

import 'whatwg-fetch'
import API from '../../axios/api'
import {UserType} from "../../utils/system-data";
import {withRouter} from "react-router-dom";
import {inject, observer} from "mobx-react";
import ArticleModalForm from './form'
import ArticleModalFormfen from './formfen'

import { func } from 'prop-types';
const confirm = Modal.confirm
let columns = [
    { dataIndex: 'ImageUrl', title: '头衔图片', width: 100,render: (text, record) =>  <img src={text} height="24" width="60" />},
    { dataIndex: 'RankTypeString', title: '系统身份', width: 100,},
    { dataIndex: 'Name', title: '头衔', width: 100,},
]

let columns1 = [
    { dataIndex: '', title: '序号', width: 100,render: (v,k,index) => <span>{index + 1}</span>},
    { dataIndex: 'RankTypeString', title: '系统身份',width: 100,},
    { dataIndex: 'RudderName', title: '所属分舵',  width: 100,},
    { dataIndex: 'RankAnotherName', title: '头衔', width: 100,},
]
@withRouter @inject('appStore') @observer
class Hall extends React.Component {
    constructor(props) {
        super(props)
        const {user, rudder, rudderList} = props.appStore
        this.state = {
            user: user,
            rudder: rudder,
            rudderList: rudderList,
            tData: [],
            tData1:[],
            item: {},
            loading: true,
            loading1:false,
            Page: 1,
            Page1:1,
            Pages:1,
            Pages1:1,
            RudderId:user.RudderId,
            RankType:'',
            RankType1:'',
            modalShow:false,
            modalShowfen:false,
            modalShowaddfen:false,
            RankTypeList:[{
                value:'9',
                mean:'班主任'
            },{
                value:'8',
                mean:'合伙人'
            },{
                value:'6',
                mean:'操盘手'
            }]
        }
    }

    componentWillReceiveProps(nextProps){
        const {user, rudder, rudderList} = this.props.appStore
        let newrudderList = [...rudderList]
        newrudderList.unshift({
            value:'',
            mean:'总舵'
        })
         this.setState({
             user: user,
             rudder: rudder,
             rudderList: newrudderList,
             RudderId:user.RudderId,
         })
     }
    

    onPageChange = (e) =>{
        this.setState({
            Page:e,
        },()=>{
            this.fetchTableData()
        })
    }

    onPageChange1 = (e) =>{
        this.setState({
            Page1:e,
        },()=>{
            this.fetchTableData()
        })
    }

    // 获取表格数据
    fetchTableData =  async (searchFields) => {
        let RankType = parseInt(searchFields&&searchFields.RankType?searchFields.RankType: this.state.RankType) ? parseInt(searchFields&&searchFields.RankType?searchFields.RankType: this.state.RankType) : 0
            let parms = {
                Page:this.state.Page,
                PageSize: 10,
                RankType: RankType
            }
           
            await API.rankAnotherNamePages(parms).then((res) => {
                if(res.Code === 200) {
                    this.setState({
                        tData: res.Data.List,
                        Pages:res.Data.Pages
                    });
                }
                this.setState({
                    loading: false
                });
            })
       
    }


    fetchTableData1 =  async (searchFields) => {
        let RankType = parseInt(searchFields&&searchFields.RankType?searchFields.RankType: this.state.RankType) ? parseInt(searchFields&&searchFields.RankType?searchFields.RankType: this.state.RankType) : 0
        let parms = {
            RudderId:searchFields && searchFields.RudderId ?  searchFields.RudderId : this.state.RudderId,
            Page:this.state.Page1,
            PageSize: 10,
            RankType:RankType
        }
        await API.RudderRankAnotherNamePages(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData1: res.Data.List,
                    Pages1:res.Data.Pages
                });
            }
            this.setState({
                loading: false
            });
        })
   
}



    componentDidMount() {
        this.fetchTableData()
    }


    fields = () => {
            return [
                { label: '菜单名称', type: 'input', name: 'PermissionName',
                    options: {
                        rules: [
                            { required: true, message: '菜单名称必填!',}
                        ]
                    }
                },
                {
                    label: '类型',
                    type: 'select',
                    name: 'PermissionType',
                    defaultValue: '后台',
                    items: () => PermissionStatus,
                    options: {
                        rules: [{
                            required: true,
                            message: '类型必选!',
                        }]
                    }
                },
                { label: '菜单地址', type: 'input', name: 'PageUrl'},
                { label: '描述', type: 'textarea', name: 'PermissionDescribe', options:{row: 2}},
                { label: '排序', type: 'inputNumber', name: 'PermissionSort', options:{setp: 1}},
            ]
        }


    onSearch = (searchFields) => {
        this.setState({
            RankType: searchFields&&searchFields.RankType ? searchFields.RankType:''
        })
       
        this.fetchTableData(searchFields)
       
    }

    onSearch1 = (searchFields) => {
        if(!searchFields.RudderId){
            message.error('请选择分舵！')
            return false;
        }
        this.setState({
            RankType1 : searchFields && searchFields.RankType ? searchFields.RankType : '',
            RudderId : searchFields && searchFields.RudderId ?  searchFields.RudderId : '',
        })
        this.fetchTableData1(searchFields)
       
    }


    searchFields = () => {
        let fields = [{
            title: '身份选择',
            key: 'RankType',
            type: 'select',
            items: () => this.state.RankTypeList,
        }]
       
        return fields
    }

    searchFields1 = () => {
        let fields = [{
            title: '身份选择',
            key: 'RankType',
            type: 'select',
            items: () => this.state.RankTypeList,
        },
        {
            title: '分舵名称',
            key: 'RudderId',
            type: 'select',
            items: () => this.state.rudderList,

        }]
       
        return fields
    }


    tableAction = (actionKey, item) => {
        let that = this

        if (actionKey === 'delete') {
            confirm({
                title: '提示',
                content: '确定删除吗',
                onOk: () => {
                    API.deleteRankAnotherName(item, 0).then(res => {
                        if(res.Code === 200) {
                            message.success('删除成功')
                            that.onCancel()
                            that.fetchTableData()
                        }
                        else message.error(res.Message)
                    })
                    this.fetchTableData()
                },
                onCancel() {}
            })
        }else if(actionKey === 'deletefen'){
          
            if(this.state.RudderId == undefined || this.state.RudderId == ''){
                confirm({
                    title: '提示',
                    content: '请在上部选择分舵',
                    onOk: () => {},
                    onCancel() {}
                })
            }else{

            }


        }else if(actionKey === 'addfen'){
            console.log(this.state.RudderId)
            this.setState({
                item:item
            })
            this.setState({
                modalShowaddfen:true
            })
        }
    }
    
    onCancel =()=>{
        this.setState({
            modalShow:false,
            modalShowfen:false,
            modalShowaddfen:false
        })
    }

    add = ()=>{
        this.setState({
            modalShow:true
        })
    }

    addfen = () =>{
        this.setState({
            modalShowfen:true
        })
    }

    onOk = (parms)=>{
        let that = this
        console.log(parms)

        API.addRankAnotherName({
            "Id":  '',//parms.rudder,
            "RankType":  parms.RankType,
            "Name":  parms.Name,
            "Description":  parms.Description,
            "ImageUrl": parms.image,
        }).then(res => {
            if(res.Code === 200) {
                message.success('添加成功')
                that.onCancel()
                that.fetchTableData()

            }
            else message.error(res.Message)
        })
    }


    onOkfen = (parms)=>{
        let that = this

        API.AddRudderRankAnotherName({
            "Id":  parms.rudder,
            "RankType":  parms.RankType,
            "Name":  parms.Name,
            "Description":  parms.Description,
            "ImageUrl": parms.image,
        }).then(res => {
            if(res.Code === 200) {
                message.success('添加成功')
                that.onCancel()
                that.fetchTableData1()

            }
            else message.error(res.Message)
        })
    }


    onOkaddfen = (parms) =>{
        let that = this;
        console.log(parms.rudder)
        console.log(this.state.item)
        API.AddRudderRankAnotherName({
            "RudderId": parms.rudder,
            "RankType":this.state.RankType,
            "RudderRankAnotherNameId":this.state.item.Id
        }).then(res => {
            if(res.Code === 200) {
                message.success('添加成功')
                that.onCancel()
            }
            else message.error(res.Message)
        })

    }

    render() {
        let action = {}
        if(this.state.RudderId == undefined || this.state.RudderId == ''){
            action = { key: 'addfen', name: '添加给其他分舵', color: 'blue', icon: 'plus'}
        }



        return (
            <div id="wrap">
                <div style={{fontSize:'20px',marginBottom:'20px'}}>全局头衔管理：</div>
                <SearchBar
                    onSubmit={this.onSearch}
                    fields={this.searchFields()}
                />
                <div style={{ paddingTop: 10 }}>
                    <Button  type="primary" onClick={this.add}>添加头衔</Button>
                </div>
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            scroll={{y: 385 }}
                            action={row => [
                                { key: 'addfen', name: '添加给分舵', color: 'blue', icon: 'plus'}
                                // { key: 'delete', name: '删除', color: 'red', icon: 'delete'},
                                // { key: 'deletefen', name: '删除该分舵头衔', color: 'red', icon: 'scissor'},
                            ]}
                            total={this.state.Pages}
                            onChange={this.onPageChange}
                            currentPage={this.state.Page}
                        />
                    </div>
                </div>


                <br />
                <hr></hr>
                <br />

                <div style={{fontSize:'20px',marginBottom:'20px'}}>分舵头衔管理：</div>

                <SearchBar
                    onSubmit={this.onSearch1}
                    fields={this.searchFields1()}
                />
                            {/**
                            
                            
                              <div style={{ paddingTop: 10 }}>
                    <Button type="primary" onClick={this.addfen}>添加头衔给分舵</Button>
                </div>*/}
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns1 }
                            data={ this.state.tData1 }
                            loading={ this.state.loading1 }
                            scroll={{y: 385 }}
                          
                            total={this.state.Pages1}
                            onChange={this.onPageChange1}
                            currentPage={this.state.Page1}
                        />
                    </div>
                </div>

           <ArticleModalForm
                modalKey="add"
                visible={this.state.modalShow}
                title="添加"
                fields={this.fields()}
                onOk={this.onOk}
                rudderList={this.state.rudderList}
                RankTypeList={this.state.RankTypeList}
                onCancel={this.onCancel}
                okText="保存"
                width="40%"
            />

            <ArticleModalForm
                modalKey="addfen"
                visible={this.state.modalShowfen}
                title="添加"
                fields={this.fields()}
                onOk={this.onOkfen}
                fen={true}
                rudderList={this.state.rudderList}
                RankTypeList={this.state.RankTypeList}
                onCancel={this.onCancel}
                okText="保存"
                width="40%"
            />

            <ArticleModalFormfen
                modalKey="addfen"
                visible={this.state.modalShowaddfen}
                title="添加给其他分舵"
                fields={this.fields()}
                onOk={this.onOkaddfen}
                fen={true}
                rudderList={this.state.rudderList}
                RankTypeList={this.state.RankTypeList}
                onCancel={this.onCancel}
                okText="保存"
                width="40%"
            />


            </div>
        )
    }
}
export default Hall
